<template>
  <div class="app-container">
    <el-table
      :data="productDictionariesList"
      style="width: 100%;"
    >

      <el-table-column :label="$t('value')" >
        <template slot-scope="scope">
          <el-input
            v-if="templateType === 'productInfo'"
            v-model="scope.row.value"
            :rows="10"
            type="textarea"
          />
          <el-input
            v-else
            v-model="scope.row.value"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('language')" >
        <template slot-scope="scope">
          <el-select v-model="scope.row.language">
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addProductDictionaries">{{ $t('add') }}</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="addOrUpdateProductProductDictionaries(scope.row)"
          >{{ $t('save') }}</el-button>
          <el-button
            v-if="scope.row.dicId"
            type="danger"
            @click="delProductDictionaries(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  successNotice,
  cancelNotice,
  listLanguage
} from '@/util/common'
import {
  insertDictionaries,
  deleteDictionaries,
  updateDictionaries,
  listDictionaries
} from '@/api/iot/iotProductDictionariesApi'
import { getLanguage, getUserId } from '@/util/storage'
export default {
  name: 'DictionariesModel',
  props: {
    productId: {
      type: Number,
      default: null
    },
    templateType: {
      type: String,
      default: null
    },
    keyName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      productDictionariesList: [],
      language: [],
      languageList: []
    }
  },
  created() {
    this.languageList = listLanguage(this)
    this.listDictionaries()
  },
  methods: {
    listDictionaries() {
      listDictionaries({
        productId: this.productId,
        templateType: this.templateType,
        keyName: this.keyName
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productDictionariesList = data
        } else {
          this.productDictionariesList = []
        }
      })
    },
    addProductDictionaries() {
      for (let i = 0, j = this.productDictionariesList.length; i < j; i++) {
        if (!this.productDictionariesList[i].dicId) {
          return
        }
      }
      const item = {
        value: '',
        language: getLanguage()
      }
      this.productDictionariesList.push(item)
    },
    addOrUpdateProductProductDictionaries(item) {
      const json = {
        userId: getUserId(),
        value: item.value,
        language: item.language,
        productId: this.productId,
        keyName: this.keyName,
        templateType: this.templateType
      }

      if (!item.dicId) {
        insertDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listDictionaries()
            this.$emit('change', {})
          }
        })
      } else {
        json.dicId = item.dicId
        updateDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
            this.listDictionaries()
            this.$emit('change', {})
          }
        })
      }
    },
    delProductDictionaries(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.value, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDictionaries({
            dicId: item.dicId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listDictionaries()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
